<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" shape="round" background="cornflowerblue" placeholder="请输入搜索关键词" @search="ss"/>

        <!-- 标签页 -->
        <van-tabs v-model:active="active">
            <van-tab title="标签 1">
                <!-- 轮播图 -->
              <lbt></lbt>
                <!-- 宫格 -->

                <van-grid :column-num="4">
                    <van-grid-item v-for="item in dh" :icon="item.image_src" :text="item.name" />
                    <van-grid-item v-for="item in dh" :icon="item.image_src" :text="item.name" />
                </van-grid>
                <!-- 秒杀 -->

                <div class="ms">
                    
                    <span>
                        <span class="jd">
                            京东秒杀倒计时
                            <span>3:23:45</span>
                        </span>
                    </span>
                </div>

            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
// 轮播图
import lbt from '@/components/lbt.vue';
// 导航
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
let dh = ref([]);
catitemsApi().then(res => {
    console.log(res);
    dh.value = res.data.message;
})
// 跳转搜索
import { useRouter } from 'vue-router';
let router=useRouter();

let ss=()=>{
    router.push('/ss')
}

</script>

<style lang="scss" scoped>
.jd{
    color: white;
    border: 1px solid red;
    background-color: red;
}
</style>
